<template>
  <div class="relative" :class="fullScreen ? 'full-screen' : 'relative'">
    <el-icon :size="28"
             class="absolute top-3 right-32 cursor-pointer"
             style="z-index:110"
             @click="resizeScreen">
      <FullScreen/>
    </el-icon>
    <el-switch v-model="editable"
               size="large"
               active-text="可编辑"
               class="absolute top-2 right-3"
               style="z-index:110"
               @change="localReadOnly = !localReadOnly"/>
    <v-ace-editor
        v-model:value="code"
        :readonly="localReadOnly"
        :printMargin="120"
        :lang="lang"
        theme="chrome"
        class="ace-editor"
        :style="'font-size:' + fontSize + 'px'"/>
  </div>
</template>

<script setup>
/////////////////////////////////   外部依赖导入    //////////////////////////
import {onMounted, onUnmounted, ref, reactive, defineProps, defineEmits, computed} from 'vue'
import {VAceEditor} from 'vue3-ace-editor';
import 'ace-builds/src-noconflict/mode-xml'; // Load the language definition file used below
import 'ace-builds/src-noconflict/mode-javascript'; // Load the language definition file used below
import 'ace-builds/src-noconflict/mode-json'; // Load the language definition file used below
import 'ace-builds/src-noconflict/theme-chrome';
import {debounce} from "@/utils/misc.js";

/////////////////////////////////   组件参数    //////////////////////////
const props = defineProps({
  modelValue: {
    type: String,
    required: true,
    default: ''
  },
  lang: {
    type: String,
    required: true,
    default: 'xml'
  },
  readOnly: {
    type: Boolean,
    default: true
  },
  fontSize: {
    type: String,
    default: "18"
  }
});
const emits = defineEmits(['update:modelValue', 'update:readOnly', 'message-event']);
const code = computed({
  get() {
    return props.modelValue;
  },
  set(newValue) {
    emits('update:modelValue', newValue);
  }
});
/////////////////////////////////   私有变量定义    //////////////////////////
let localReadOnly = ref(true)
let editable = ref(false)
const fullScreen = ref(false)
/////////////////////////////////   生命周期方法 //////////////////////////
onMounted(() => {
  console.log(props.readOnly)
  localReadOnly.value = props.readOnly;
  editable.value = !props.readOnly;
});
onUnmounted(() => {
});

/////////////////////////////////   页面方法    //////////////////////////
const resizeScreen = () => {
  fullScreen.value = !fullScreen.value
}
const onAceEditorChange = debounce((content) => {
  // bpmnModelerInstance.importXML(content)
}, 300)
const onCommand = () => {
}
</script>

<style scoped>
.full-screen {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 100;
}

.full-screen > .full-screen-icon {
  z-index: 121;
}

.ace-editor {
  height: 100%;;
}

.full-screen .ace-editor {
  height: 100vh;
}
</style>
